<template>
    <el-dialog :visible.sync="isShow" :title="headerTitle" class="common-dialog" @close="handleClose" center top="14vh" width="50%" append-to-body :fullscreen="fullscreen">
        <el-form :model="dialogForm" size="small" label-position="left" label-suffix=":" ref="detailForm" :rules="rules" label-width="100px">
            <el-row :gutter="20">
                <!--              大缺陷名称：-->
                <el-col :span="12">
                    <el-form-item :label="$t('basicData.MajorDefects')" prop="maxFlawName" ref="maxFlawName">
                        <el-autocomplete :disabled="type == '2'" style="width:100%;" popper-class="my-autocomplete" v-model="dialogForm.maxFlawName" :fetch-suggestions="maxFlawRemoteMethod" placeholder="请输入内容" @select="handleMaxFlawSelect">
                            <i class="el-icon-search el-input__icon" slot="suffix">
                            </i>
                            <template slot-scope="{ item }">
                                {{ item.maxFlawName }}
                            </template>
                        </el-autocomplete>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--              大缺陷名称：-->
                    <el-form-item :label="$t('basicData.MajorDefectsCode')" prop="maxFlawCode">
                        <el-input v-model="dialogForm.maxFlawCode" disabled :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--              缺陷类型：-->
                    <el-form-item :label="$t('basicData.flawType')" prop="flawType" ref="flawType">
                        <el-select v-model="dialogForm.flawType" style="width:100%;" size="small" reserve-keyword :placeholder="$t('public.inputPl')+$t('basicData.flawType')">
                            <el-option v-for="item in dict.type.NYIQC_FLAW_TYPE" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--              小缺陷名称：-->
                    <el-form-item :label="$t('basicData.smallDefect')" prop="minFlawName">
                        <el-input v-model="dialogForm.minFlawName" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!--              小缺陷编号：-->
                    <el-form-item :label="$t('basicData.smallDefectCode')" prop="minFlawCode">
                        <el-input v-model="dialogForm.minFlawCode" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="12">
                    <el-form-item :label="$t('basicData.materialSubType')" prop="materialMin">
                        <el-select v-model="dialogForm.materialMin" filterable size="small" style="width:100%" reserve-keyword :placeholder="$t('public.inputPl')+$t('basicData.materialSubType')">
                            <el-option v-for="(item,index) in materialOptions" :key="index" :label="item.groupingCode" :value="item.groupingCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <!--              描述：-->
                    <el-form-item :label="$t('basicData.description')" prop="description">
                        <el-input v-model="dialogForm.description" :placeholder="$t('public.inputPl')" clearable />

                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm" :loading="loading" icon="el-icon-document" size="small">{{$t('public.save')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {addMinFlaw, getUnique, listAllMaxFlaw, updateMinFlaw,} from '@/api/basic/flawProject'
import EnjoySelectUser from '@/components/EnjoySelectUser'
import EnjoySelectDeptTree from '@/components/EnjoySelectDeptTree'
import FileUploadInput from '@/components/FileUploadInput'

export default {
    name: 'detailMin',
    components: { EnjoySelectUser, EnjoySelectDeptTree, FileUploadInput },
    dicts: ['NYIQC_FLAW_TYPE'],
    props: {
        value: {
            type: Object,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        type: [String, Number], //1:新增  2：编辑 3：查看
    },
    watch: {
        value(val) {
            this.dialogForm = { ...val }
            this.materialRemoteMethod()
        },
    },
    computed: {
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            const { type } = this
            let title = ''
            if (type == 1) {
                title =
                    this.$t('public.add') +
                    ' ' +
                    this.$t('basicData.smallDefect')
            }
            if (type == 2) {
                title =
                    this.$t('public.add') +
                    ' ' +
                    this.$t('basicData.smallDefect')
            }

            return title
        },
    },
    data() {
        return {
            loading: false,
            fullscreen: false,
            deviceOptions: undefined,
            materialOptions: undefined,
            dialogForm: {
                maxFlawName: '',
                flawType: '',
                minFlawName: '',
                materialMin: '',
                description: '',
            },
            maxFlawNameOptions: [],
            // 表单校验
            rules: {
                maxFlawName: [
                    {
                        required: true,
                        message: this.$t('formValidation.bigDefectCannotBeEmpty'),
                        trigger: 'blur',
                    },
                ],
                // maxFlawCode: [
                //     {
                //         required: true,
                //         message: '大缺陷编号不能为空',
                //         trigger: 'blur',
                //     },
                // ],
                flawType: [
                    {
                        required: true,
                        message: this.$t('formValidation.defectTypeCannotBeEmpty'),
                        trigger: 'blur',
                    },
                ],
                minFlawName: [
                    {
                        required: true,
                        message: this.$t('formValidation.smallDefectNameCannotBeEmpty'),
                        trigger: 'blur',
                    },
                ],
                // minFlawCode: [
                //     {
                //         required: true,
                //         message: '小缺陷编号不能为空',
                //         trigger: 'blur',
                //     },
                // ],
                // materialMin: [
                //     {
                //         required: true,
                //         message: '物料小类不能为空',
                //         trigger: 'blur',
                //     },
                // ],
            },
        }
    },
    methods: {
        /** 发起提交 */
        submitForm: function () {
            this.$refs.detailForm.validate((valid) => {
                let action = this.type == 1 ? addMinFlaw : updateMinFlaw
                if (valid) {
                    let params = {}
                    if (this.type == '2') {
                        params = {
                            description: this.dialogForm.description,
                            fileId: this.dialogForm.fileId,
                            flawType: this.dialogForm.flawType,
                            id: this.dialogForm.id,
                            materialMin: this.dialogForm.materialMin,
                            maxFlawId: this.dialogForm.maxFlawId,
                            minFlawName: this.dialogForm.minFlawName,
                            minFlawCode: this.dialogForm.minFlawCode,
                            remark: this.dialogForm.description,
                        }
                    }
                    if (this.type == 1) {
                        params = this.dialogForm
                    }
                    this.loading = true
                    getUnique({
                        materialMin: params.materialMin,
                        minFlawName: params.minFlawName,
                    })
                        .then((res) => {
                            if (res.code == 200 && res.data > 0) {
                                this.$modal.msgError(
                                    '小缺陷已经存在 不允许重复添加!'
                                )
                                this.loading = false
                            } else {
                                action(params).then(
                                    (res) => {
                                        this.loading = false
                                        if (res.code == 200) {
                                            this.$emit('refresh')
                                            this.$modal.msgSuccess('操作成功!')
                                            this.$emit('update:visible', false)
                                        }
                                    },
                                    (err) => {
                                        this.loading = false
                                    }
                                )
                            }
                        })
                        .catch((err) => {
                            this.loading = false
                        })
                }
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false)
            this.$refs['detailForm'].resetFields()
        },
        handleFlawProjectTypeChange(e) {
            this.queryParams.gaugeType = e.join(',')
        },

        maxFlawRemoteMethod(val, cb) {
            listAllMaxFlaw({ maxFlawName: val }).then((res) => {
                this.maxFlawNameOptions = res.data.map((i) => i.maxFlawName)
                cb(res.data)
            })
        },
        handleMaxFlawSelect(e) {
            console.log(e)
            this.dialogForm.maxFlawId = e.id
            this.dialogForm.maxFlawName = e.maxFlawName
            this.dialogForm.maxFlawCode = e.maxFlawCode
            this.$refs.maxFlawName.$emit('el.form.blur')
        },
        handleMaxFlawBlur(e) {
            const { maxFlawNameOptions, dialogForm } = this
            if (!maxFlawNameOptions.includes(dialogForm.maxFlawName)) {
                this.dialogForm.maxFlawName = ''
            }
        },
        materialRemoteMethod() {
            // listAllMaterialTypeV2().then((res) => {
            //     this.materialOptions = res.data
            // })
        },
        handleMaterialSelect(e) {
            this.dialogForm.materialType = e.typeName
            this.$refs.materialType.$emit('el.form.blur')
        },
        handleMaterialBlur(value) {
            const { materialOptions } = this
            if (!materialOptions.includes(value)) {
                this.dialogForm.materialType = ''
            }
        },
    },
}
</script>

<style scoped>
</style>
